<template>
	<view class="coupons-container">
		<view class="banner" @click="getPlatformCoupons">
			限时领券 最高减50元
		</view>

		<view class="empty-state" v-if="coupons.length === 0">
			<view class="empty-icon">
				<uni-icons type="ticket" size="48"></uni-icons>
			</view>
			<view class="empty-text">暂无优惠券，快去领取吧</view>
		</view>

		<!-- 平台优惠券 -->
		<view class="section-title">
			<text>平台优惠券</text>
			<text class="view-all">查看全部 <uni-icons type="arrowright" size="12"></uni-icons></text>
		</view>
		<scroll-view scroll-x>
			<view class="platform-coupons">
				<view class="platform-coupon" v-for="(coupon, index) in platformCoupons" :key="index"
					@click="getPlatformCoupon(coupon)">
					<view class="coupon-amount">
						<template v-if="coupon.type === 'amount'">
							¥<text class="coupon-amount-large">{{ coupon.value }}</text>
						</template>
						<template v-else-if="coupon.type === 'discount'">
							<text class="coupon-amount-small">{{ coupon.text }}</text>
						</template>
					</view>
					<view class="coupon-threshold">{{ coupon.threshold }}</view>
					<button class="merchant-button">立即领取</button>
				</view>
			</view>
		</scroll-view>


		<!-- 商家优惠券 -->
		<view class="section-title">
			<text>商家优惠券</text>
			<text class="view-all" @click="viewAllMerchantCoupons">查看全部 <uni-icons type="arrowright"
					size="12"></uni-icons></text>
		</view>

		<scroll-view scroll-x>
			<view class="merchant-coupons">
				<view class="merchant-coupon" v-for="(merchant, index) in merchants" :key="index"
					@click="getMerchantCoupon(merchant)">
					<view>
						<image class="merchant-logo" :src="merchant.logo" mode="center"></image>
					</view>
					<view class="merchant-name">{{ merchant.name }}</view>
					<view class="merchant-discount">{{ merchant.discount }}</view>
					<button class="merchant-button">立即领取</button>
				</view>
			</view>
		</scroll-view>

		<view class="tabs">
			<view class="tab" :class="{ active: activeTab === 0 }" @click="activeTab = 0">未使用</view>
			<view class="tab" :class="{ active: activeTab === 1 }" @click="activeTab = 1">已使用</view>
			<view class="tab" :class="{ active: activeTab === 2 }" @click="activeTab = 2">已过期</view>
		</view>

		<!-- 用户优惠券列表 -->
		<view class="coupon-list">
			<view class="coupon-item coupon-item-bottom" v-for="(coupon, index) in coupons" :key="index">
				<view class="coupon-left">
					<view class="coupon-amount">
						<template v-if="coupon.type === 'amount'">
							¥<text class="coupon-amount-large">{{ coupon.value }}</text>
						</template>
						<template v-else-if="coupon.type === 'discount'">
							<text class="coupon-amount-small">{{ coupon.text }}</text>
						</template>
					</view>
					<view class="coupon-threshold">{{ coupon.threshold }}</view>
				</view>
				<view class="coupon-right">
					<view>
						<view class="coupon-name">{{ coupon.name }}</view>
						<view class="coupon-scope">{{ coupon.scope }}</view>
						<view class="coupon-time">有效期至：{{ coupon.expireDate }}</view>
					</view>
					<button class="coupon-button"
						:class="{ 'used': coupon.status === 'used', 'expired': coupon.status === 'expired' }">
						{{ coupon.buttonText }}
					</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const activeTab = ref(0)

	const coupons = ref([{
			type: 'amount',
			value: '10',
			threshold: '满99元可用',
			name: '新人专享券',
			scope: '全场通用',
			expireDate: '2023-12-31',
			status: 'unused',
			buttonText: '立即使用'
		},
		{
			type: 'amount',
			value: '20',
			threshold: '满199元可用',
			name: '会员专享券',
			scope: '仅限家居类商品',
			expireDate: '2023-11-30',
			status: 'unused',
			buttonText: '立即使用'
		},
		{
			type: 'discount',
			text: '满减',
			threshold: '满99减30',
			name: '限时满减券',
			scope: '仅限厨房用品',
			expireDate: '2023-10-31',
			status: 'unused',
			buttonText: '立即使用'
		},
		{
			type: 'discount',
			text: '折扣',
			threshold: '8.5折',
			name: '生日特惠券',
			scope: '全场通用',
			expireDate: '2023-12-15',
			status: 'unused',
			buttonText: '立即使用'
		}
	])

	const merchants = ref([{
			logo: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f',
			name: '名创优品旗舰店',
			discount: '满100减20'
		},
		{
			name: '厨房用品专营店',
			discount: '满200减50'
		},
		{
			name: '家居生活馆',
			discount: '满150减30'
		},
		{
			name: '数码配件专营',
			discount: '满99减15'
		}
	])

	// 新增方法
	const getPlatformCoupons = () => {
		uni.showToast({
			title: '领取平台优惠券',
			icon: 'none'
		})
	}

	const viewAllMerchantCoupons = () => {
		uni.navigateTo({
			url: '/subpackage_user/user/allCoupons'
		})
	}

	const getMerchantCoupon = (merchant) => {
		uni.showToast({
			title: `领取${merchant.name}优惠券`,
			icon: 'none'
		})
	}

	const platformCoupons = ref([{
			type: 'amount',
			value: '50',
			threshold: '满299元可用',
			name: '平台大额券'
		},
		{
			type: 'amount',
			value: '30',
			threshold: '满199元可用',
			name: '平台中额券'
		},
		{
			type: 'discount',
			text: '8折',
			threshold: '全场通用',
			name: '平台折扣券'
		},
		{
			type: 'discount',
			text: '满减',
			threshold: '满199减50',
			name: '平台满减券'
		}
	])

	const getPlatformCoupon = (coupon) => {
		uni.showToast({
			title: `领取${coupon.name}`,
			icon: 'none'
		})
	}

	onLoad(() => {
		// 初始化数据
	})
</script>

<style lang="scss" scoped>
	.coupons-container {
		padding: 15px;
		padding-bottom: 70px;
	}

	.tabs {
		display: flex;
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 15px;
		overflow: hidden;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		font-weight: 500;
		color: #666;
		position: relative;
	}

	.tab.active {
		color: #ff5c8a;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 3px;
		background-color: #ff5c8a;
		border-radius: 1.5px;
	}

	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.coupon-item {
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		position: relative;
	}

	.coupon-item::before {
		content: '';
		position: absolute;
		left: 25%;
		top: 0;
		bottom: 0;
		width: 1px;
		background: repeating-linear-gradient(to bottom, #f8f8f8 0, #f8f8f8 4px, transparent 4px, transparent 8px);
	}

	.coupon-item::after {
		content: '';
		position: absolute;
		left: 25%;
		top: 0;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #f8f8f8;
		transform: translate(-50%, -50%);
	}

	.coupon-item-bottom::after {
		content: '';
		position: absolute;
		left: 25%;
		bottom: 0;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #f8f8f8;
		transform: translate(-50%, 50%);
	}

	.coupon-left {
		width: 25%;
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.coupon-amount {
		font-size: 20px;
		font-weight: 700;
		color: #ff5c8a;
	}

	.coupon-amount-small {
		font-size: 14px;
	}

	.coupon-threshold {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.coupon-right {
		flex: 1;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.coupon-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 5px;
	}

	.coupon-scope {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.coupon-time {
		font-size: 12px;
		color: #999;
	}

	.coupon-button {
		position: absolute;
		right: 15px;
		bottom: 15px;
		background-color: #ff5c8a;
		color: white;
		border: none;
		border-radius: 15px;
		padding: 5px 15px;
		font-size: 12px;
	}

	.coupon-button.used {
		background-color: #ccc;
	}

	.coupon-button.expired {
		background-color: #999;
	}

	.platform-coupons {
		display: flex;
		gap: 12px;
		padding: 5px 0;
		margin-bottom: 10px;
		white-space: nowrap;
	}

	.platform-coupon {
		flex: 0 0 auto;
		width: 120px;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.merchant-button {
			margin-top: 8px;
		}
	}

	.banner {
		width: 100%;
		height: 120px;
		background-color: #ff5c8a;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 15px;
		background-image: linear-gradient(to right, #ff5c8a, #ff8eb2);
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		margin: 20px 0 10px;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.view-all {
		font-size: 12px;
		color: #999;
		font-weight: normal;
	}

	.merchant-coupons {
		display: flex;
		gap: 12px;
		padding: 5px 0;
		margin-bottom: 10px;
		white-space: nowrap;
	}

	.merchant-coupon {
		flex: 0 0 auto;
		width: 120px;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		padding: 10px;
	}

	.merchant-logo {
		width: 40px;
		height: 40px;
		background-color: #eee;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		margin-bottom: 10px;
	}

	.merchant-name {
		font-size: 12px;
		font-weight: 500;
		color: #333;
		margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.merchant-discount {
		font-size: 14px;
		font-weight: 600;
		color: #ff5c8a;
		margin-bottom: 5px;
	}

	.merchant-button {
		background-color: #ff5c8a;
		color: white;
		border: none;
		border-radius: 12px;
		padding: 4px 0;
		font-size: 12px;
		width: 100%;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.empty-icon {
		font-size: 48px;
		color: #ddd;
		margin-bottom: 15px;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
		text-align: center;
	}
</style>